<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: wjk
 * @description: 单品
 -->
<template>
  <view class="commodity-single">
    <view v-if="maskType === 'singleGoods'" class="sLine" @click="showPopup('skuCart')">
      <view class="lCont">规格</view>
      <view v-if="selectedSkuItem || singleGoods.box_count" class="rCont">
        <block v-if="selectedSkuItem && singleGoods.type !== 2">已选择: {{ selectedSkuItem ? selectedSkuItem.selectText : '无' }} </block>
        <block v-if="singleGoods.box_count">{{ ' (' + singleGoods.box_count }}件/单位)  X {{ buyCountAry.count }} 单位</block>
        <image v-if="!hideMenu" class="right_arror" src="/static/images/icon/icon_arror_right.png" />
      </view>
      <view v-else class="rCont">请选择
        <image class="right_arror" src="/static/images/icon/icon_arror_right.png" />
      </view>
    </view>
    <base-popup :show="pShow" whole-mask :show-close="false" @close="closePopup">
      <view
        v-if="singleGoods && singleGoods.sku_list && hold"
        class="maskContainer singleGoodsShopCartMask"
        @touchmove.prevent>
        <view class="cartClose" @click="closePopup">
          <image src="/static/images/icon/icon_close.png" />
        </view>
        <view class="cartMain">
          <view class="goodsImg">
            <b-image width="180" height="180" :src="selectedSkuItem ? selectedSkuItem.goods_pic : singleGoods.pic" />
          </view>
          <view class="priceBox">
            <view class="price">
              <view v-if="groupInfo.groupPrice" class="span"><view class="b">¥</view>{{ groupInfo.groupPrice | formatMoney }}</view>
              <view v-else-if="commodityType === 'boxGoods'" class="span"><view class="b">¥</view>{{ (_getUserLevel(selectedSkuItem || singleGoods)) | formatMoney }}</view>
              <view v-else class="span"><view class="b">¥</view>{{ (selectedSkuItem ? selectedSkuItem.vip_price : singleGoods.vip_price) | formatMoney }}</view>
            </view>
            <view class="skuDec">{{ selectedSkuItem ? `已选择: "${selectedSkuItem.selectText ? selectedSkuItem.selectText + ';' : ''}  ${buyCountAry.count}件"` : '无' }}</view>
          </view>
        </view>
        <sku-list :sku-origin="singleGoods" :sku-list="singleGoods.sku_list" @selectedItem="changeSkuItem($event, singleGoods, maskType)"></sku-list>
        <view v-if="maskType !== 'packSelect' && maskType !== 'presentSelect'" class="cartCount">
          <view class="title">购买数量
            <view v-if="selectedSkuItem && selectedSkuItem.order_limit != 0" class="small">
              (限购{{ selectedSkuItem.order_limit }}件)
            </view>
            <text v-if="(commodityType === 'boxGoods' || commodityType === 'partner') && singleGoods.min_num > 0" class="min-gray">
              ({{ singleGoods.min_num }}单位起购)
            </text>
          </view>
          <view style="height: 42rpx">
            <base-stepper :border-radius="0" :value.sync="buyCountAry.count" :size="42" :min="buyCountAry.min" :max="selectedSkuItem && selectedSkuItem.order_max && selectedSkuItem.order_max!==0?selectedSkuItem.order_max:buyCountAry.max" @change="changeQuantity($event)" @disable="alertMax" />
          </view>
        </view>
        <view class="cartBut maskBottomBtn" :class="{'gray': !selectedSkuItem}" @click="cartConfirm">确认</view>
      </view>
    </base-popup>
  </view>
</template>
<script>
import BaseStepper from '@/components/base/base-stepper'
import { getUserLevel } from '@/utils/common'
import SkuList from './commodity-sku'
export default {
  name: 'CommoditySingle',
  components: {
    BaseStepper,
    SkuList
  },
  props: {
    singleGoods: {
      type: Object,
      required: true,
      default: null // 是否显示遮罩层
    },
    maskType: {
      type: String,
      default: '' // 类型
    },
    needHold: {
      type: Boolean,
      default: () => { return false } // 是否是直播
    },
    hideMenu: {
      type: Boolean,
      default: () => { return false } // 是否只能看
    },
    groupBuy: {
      type: Object,
      default: () => { return {} } // 拼团数据
    },
    buyCountAry: {
      type: Object,
      default: () => {
        return {
          max: 9999,
          min: 1,
          count: 1
        }
      }
    },
    commodityType: {
      type: String,
      default: '' // 类型
    }
  },
  data() {
    return {
      pShow: false,
      hold: true,
      selectedSkuItem: null,
      isBoxGoodsPackage: false, // 箱起套餐
      groupParam: {},
      buyType: '',
      buyCountAryOrigin: null,
      groupInfo: {
        groupPrice: 0
      }
    }
  },
  created() {
    if (this.commodityType === 'boxGoods') {
      this.isBoxGoodsPackage = this.singleGoods.from_type === 11 && this.singleGoods.goods_type === 2
      if (!this.singleGoods.pack_list || !this.singleGoods.pack_list.length) return
      this.selectedSkuItem = {
        activity_id: this.singleGoods.activity_id,
        selectText: '',
        director_price: this.singleGoods.director_price,
        from_type: 11,
        goods_id: this.singleGoods.box_id,
        goods_pic: this.singleGoods.pic,
        num: Math.min.apply(Math, this.singleGoods.pack_list.map(item => item.sku_number)),
        order_limit: 0,
        package_goods_number: 1,
        price: this.singleGoods.price,
        properties_name: '',
        region_price: this.singleGoods.region_price,
        sku_code: this.singleGoods.pack_list[0].sku_code,
        vip_price: this.singleGoods.vip_price
      }
      setTimeout(() => {
        this.closePopup()
      }, 200)
    }
  },
  methods: {
    _getUserLevel(item) {
      if (item) {
        return item[getUserLevel()] || 0
      }
      return 0
    },
    showPopup(limit) {
      if (this.hideMenu) return
      if (this.groupBuy.groupInfo) {
        this.groupInfo.groupPrice = (limit === 'openGroup' ? this.groupBuy.groupInfo.groupPrice : 0)
      }
      this.buyType = limit
      if (this.selectedSkuItem && (limit === 'buyBtn' || limit === 'cartBtn')) {
        this.cartConfirm()
        return
      }
      if (this.needHold) {
        this.hold = false
        setTimeout(() => {
          this.hold = true
        }, 10)
      }
      this.pShow = true
    },
    closePopup() {
      this.$set(this, 'pShow', false)
      // if (this.isBoxGoodsPackage) return
      this.$emit('closePopup', {
        ...this.selectedSkuItem,
        count: this.buyCountAry.count
      })
    },
    cartConfirm() {
      if (!this.selectedSkuItem) return
      this.closePopup()
      const data = {
        selectedSkuItem: this.selectedSkuItem,
        count: this.buyCountAry.count,
        maskType: this.maskType,
        buyType: this.buyType
      }
      if (this.isBoxGoodsPackage) {
        data.maskType = 'package'
        data.packageList = this.singleGoods.pack_list.map(item => {
          return {
            goods_id: item.goods_id,
            sku_code: item.sku_code,
            num: item.package_goods_number,
            selectedSkuItem: {
              sku_code: item.sku_code,
              package_goods_number: item.package_goods_number,
              activity_id: '',
              from_type: 11
            },
            activity_id: '',
            from_type: 11
          }
        })
      }
      this.$emit('confirm', data)
    },
    alertMax(type) {
      if (type === 'add') {
        const item = this.selectedSkuItem || {}
        if (!item) return
        if (item.order_max === item.order_limit) {
          uni.showToast({
            title: '商品限购，无法加购',
            icon: 'none',
            duration: 1500
          })
        } else {
          uni.showToast({
            title: '商品库存不足',
            icon: 'none',
            duration: 1500
          })
        }
      }
    },
    changeQuantity(num, goods) {
      this.$emit('buyCountChange', num)
      this.$emit('buyCountChangeMax', this.buyCountAry.max)
      // this.$set(this.buyCountAry, 'count', num)
    },
    // 拼团设置最大值
    setMax() {
      if (!this.buyCountAryOrigin) {
        const origin = JSON.stringify(this.buyCountAry)
        this.buyCountAryOrigin = JSON.parse(origin)
      }
      this.$set(this.buyCountAry, 'max', this.groupBuy.groupInfo.groupLimit)
      if (this.buyCountAry.count > this.groupBuy.groupInfo.groupLimit) {
        this.$set(this.buyCountAry, 'count', this.groupBuy.groupInfo.groupLimit)
        this.$emit('buyCountChangeMax', this.buyCountAry.max)
      }
    },
    // 最大值还原
    resetMax() {
      if (!this.buyCountAryOrigin) {
        const origin = JSON.stringify(this.buyCountAry)
        this.buyCountAryOrigin = JSON.parse(origin)
      }
      let result
      if (this.selectedSkuItem) {
        result = (this.selectedSkuItem && this.selectedSkuItem.order_limit) !== 0 ? this.selectedSkuItem.order_limit : this.buyCountAryOrigin.max
      } else {
        result = this.buyCountAryOrigin.max
      }
      this.$set(this.buyCountAry, 'max', result)
      this.$emit('buyCountChangeMax', result)
    },
    changeSkuItem(item, ringe, type) {
      console.log(item);
      if (this.commodityType === 'boxGoods' && this.isBoxGoodsPackage) return
      if (item) {
        item.order_max = item.num
        if (item.order_limit > 0) {
          item.order_max = Math.min(item.order_limit, item.num)
        }
        this.changeQuantity(1)
      }
      this.$emit('selectedItem', item)
      if (item && !this.selectedSkuItem) {
        setTimeout(() => {
          this.$emit('closePopup', {
            ...this.selectedSkuItem,
            count: this.buyCountAry.count
          })
        }, 200)
      }
      if (ringe) {
        this.$set(this, 'selectedSkuItem', item)
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
